<template>
  <view>
    <view class="u-page">
      <view>
        <view class="bg forbid" v-if="forbid">
          <image class="danger" :src="API_PREFIX + '/mobile/wxImages/daka/3.png'" mode="aspectFill"></image>
          <div class="tip">
            提示：{{
              globalConfig.forbidText ||
              "当前人员不宜进入公共场所，请使其尽快前往医院进行检测！"
            }}
          </div>
        </view>

        <view class="bg" v-else>
          <image class="success" v-if="dkSuccess == 1" :src="API_PREFIX + '/mobile/wxImages/daka/1.png'"
            mode="aspectFill"></image>
          <image class="fail" v-if="dkSuccess == 2" :src="API_PREFIX + '/mobile/wxImages/daka/2.png'" mode="aspectFill">
          </image>
          <!-- <div class="tip" v-if="errorMsg">提示：{{ errorMsg }}</div> -->
        </view>

        <view class="leninfo">
          <view class="key">打卡人 </view>
          <view class="value">{{ info.userName.slice(0,1)}}<span v-for="(item,index) in (info.userName.length - 1)">*</span></view>
        </view>
        <view class="leninfo">
          <view class="key">证件号码 </view>
          <view class="value">{{ info.credentialsNo.slice(0,6) + '********' + info.credentialsNo.slice(14,info.credentialsNo.length)}}</view>
        </view>
        <view class="leninfo">
          <view class="key">打卡场所 </view>
          <view class="value">{{ companyName }}</view>
        </view>
        <view class="leninfo">
          <view class="key">打卡时间</view>
          <view class="value">{{ info.time||'' }}</view>
        </view>
        <view class="leninfo" v-if="info.provinceName">
          <view class="key">来源地</view>
          <view class="value">{{ info.provinceName ||'' }}</view>
        </view>

       <view class="leninfo" v-if="info.userName"><view class="key">苏康码</view><view class="value" :style="skmStyle"><u-loading-icon v-if="!skmInfo"></u-loading-icon> <text v-else>{{skmInfo}}</text> </view></view>
        <view class="leninfo" v-if="info.userName"><view class="key">核酸检测结果</view><view class="value" :style="hsStyle"><u-loading-icon v-if="!hsInfo"></u-loading-icon><text v-else>{{hsInfo}}</text> </view></view>
      </view>

      <view class="extInfo" v-if="!dkSuccess && isKaKou && info.userName">
        <view class="text">补充信息</view>
        <view class="leninfo">
          <view class="key">来源地</view>
          <view class="value">
            <regionPicker ref="regionPicker" :multiIndex_="provinceCityArea" 
              @selecteRegion_="selecteProvinceCityArea($event, item)" :column_="3"></regionPicker>
          </view>
        </view>
        <view class="extBtn">
          <u-button text="确定打卡/提交" type="primary" @click="submitDakaInfo()"></u-button>
        </view>
      </view>
    </view>
    <view class="buttomBtn">
        <u-button text="扫一扫" type="primary" @click="doQrScan()"></u-button>
      </view>
  </view>
</template>

<script>
  import regionPicker from '@/components/region-picker/region-picker.vue';
  import getLocation from "@/utils/getLocation.js";
  import {
    mapState,
    mapMutations
  } from "vuex";
  import sceneMixins from "@/utils/sceneMixins";
  export default {
    components: {regionPicker},
    mixins: [getLocation, sceneMixins],
    data() {
      return {
        forbid: false,
        dkSuccess: 0,
        errorMsg: "",
        API_PREFIX: this.API_PREFIX,
        info: {},
        isKaKou: false,
				skmStyle: '',
				hsStyle: '',
				hsInfo: '',
				skmInfo: '',
        companyName: '',

        provinceCityArea: [],
        provinceName: '',
      };
    },
    computed: {
      ...mapState(["globalConfig", "userInfo"]),
    },
    options: {
      styleIsolation: "shared",
    },
    filters: {
      addrFmt: function (v) {
        return v.replace(/^江苏省连云港市/, "");
      },
    },
    onLoad(options) {
      var vm = this;
      var companyId = options.companyId;
      var companyName = options.companyName;
      vm.companyId = companyId;
      vm.companyName = companyName;
      vm.isKaKou = options.isKaKou;
  
      var qrcodeInfo = options.info;
      if (qrcodeInfo) {
        vm.parseQrCode(qrcodeInfo);
      } else {
        vm.doQrScan();
      }
      
    },
    methods: {
      selecteProvinceCityArea(data) {
        var vm = this;
        vm.provinceCityArea = data.code;
        var areaCode = data.code.length ? data.code.slice(-1)[0] : '';
        vm.provinceName = data.name.join('-');
        vm.provinceCode = areaCode;
      },
      doQrScan: function () {
        var vm = this;
        uni.scanCode({
          onlyFromCamera: true, //只能从相机中获取，不能从图片中获取
          success: function (res) {
            vm.parseQrCode(res.result);
          },
          fail: function (res) {
            uni.$u.toast("扫码失败");
          },
        });
      },
      parseQrCode: function (info) {
        var vm = this;
        var plusIndex= info.lastIndexOf('+');
        var bm = info.substring(plusIndex + 1); // 只要后缀名
        var id = info.substring(0, plusIndex); // 只要前面
        if (bm && id && plusIndex != -1) {
          if (id.length == 28) {
            // 获取个人信息
            vm.getAndLoad(
              "个人信息",
              "/mobile/ymt/owncenter/wdhzm/ownhzm.jsp?openId=" + id, 
              function (res) {
                vm.info = res.data;
                vm.doDaka();
              }
            );
          } else {
            // 获取成员信息
            vm.getAndLoad(
              "获取家庭成员信息",
              "/mobile/ymt/owncenter/jtcywh/jtcydetail.jsp?id=" + id + "&entity=" + bm,
              function (res) {
                vm.info = res.data;
                vm.doDaka();
              }
            );
          }
        } else {
          uni.$u.toast("二维码信息错误");
        }
        
      },
      doDaka: function () {
          var vm = this;
          vm.skmStyle = '';
          vm.skmInfo = '';
          vm.hsStyle = '';
          vm.skmInfo = '';
          vm.dkSuccess = 0;
          
          if (vm.isKaKou) {
            // wait
            vm.getJkinfo();
          } else {
            vm.submitDakaInfo();  
          }
      },
      submitDakaInfo: function () {
        var vm = this;
        if (vm.isKaKou) {
          if (!vm.provinceName) {
            uni.$u.toast('请选择来源地');
            return;
          } else {
            vm.info.provinceName = vm.provinceName;
          }
        }
        uni.showLoading({title: '请稍后'});
        vm.getUserLocation().then(res => {
						uni.hideLoading();
						var postUrl = '/mobile/h5/covid19/apiShm/qdLog/save.jsp?' + vm.$Util.stringify({ openId: vm.info.openId || '家庭成员',
            idcard: vm.info.credentialsNo,
            xm: vm.info.userName,
            phone: vm.info.phone,
            lyd: vm.provinceName || '',
            shmId: vm.companyId, lng: res.longitude, lat: res.latitude });
            uni.showLoading({title: '请稍后'});
						vm.getAndLoad('打卡', postUrl, function (res2) {
              global.listPageNeedReload = true;
              uni.hideLoading();
							if (res2.code == 0) {
                vm.dkSuccess = 1;
                vm.info.time = res2.data.createTime;
                !vm.isKaKou && vm.getJkinfo()
							} else {
								vm.dkSuccess = 2;
                 vm.errorMsg = '打卡失败';
							}
						});
					}).catch(e => {
						vm.dkSuccess = 2;
            vm.errorMsg = '无法获取定位';
					});
      },
      getJkinfo: function () {
        var vm = this;
        var userName = vm.info.userName;
        var credentialsNo = vm.info.credentialsNo;
        vm.getAndLoad('苏康码', `/mobile/ymt/skmHs/getInfo.jsp?type=skm&userName=${userName}&idCard=${credentialsNo}`, function (res2) {
							if (res2.code == 0) {
								vm.skmInfo = res2.data.levelDescribed;
								if (vm.skmInfo == '绿码') {
									vm.skmStyle = 'color:green;';
								} else if (vm.skmInfo == '红码') {
									vm.forbid = 2;
									vm.skmStyle = 'color:red;';
								} else if (vm.skmInfo == '黄码') {
									vm.forbid = 2;
									vm.skmStyle = 'color:orange;';
								}
							} else {
								vm.skmInfo = res2.msg;
							}
						});
						vm.getAndLoad('核酸报告', `/mobile/ymt/skmHs/getInfo.jsp?type=hs&userName=${userName}&idCard=${credentialsNo}`, function (res2) {
							if (res2.code == 1) {
								vm.hsInfo = res2.msg;
							} else if (res2.datas && res2.datas[0]) {
								var result = res2.datas[0];
								var detalTime = new Date().getTime() - new Date(result.hsjcsj.replace(/-/g, '/')).getTime();
								var tipMore = '';
								if (detalTime < 24 * 60 * 60 * 1000) {
									tipMore = '(24小时以内)';
								} else if (detalTime < 48 * 60 * 60 * 1000) {
									tipMore = '(48小时以内)';
								}
								vm.hsInfo = `${result.hsjcjg}${tipMore}\n${result.hsjcsj}`;
								if (result.hsjcjg == '阴性') {
									vm.hsStyle = 'color:green;';
								} else if (result.hsjcjg == '阳性') {
									vm.forbid = 2;
									vm.hsStyle = 'color:red;';
								}
							} else {
								vm.hsInfo = '未查到近期结果';
							}
						});
      }
    },
  };
</script>

<style lang="scss" scoped>
  .u-page {}

  .bg {
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;

    image {
      width: 600rpx;
      height: 391rpx;
      margin-top: 70rpx;
    }

    .tip {
      padding: 0 50rpx;
      font-size: 28rpx;
      text-indent: 2rem;
      color: #544f4f;
      margin-top: -80rpx;
    }

    &.forbid .tip {
      color: red !important;
    }
  }

  .btn {
    margin: 30rpx 30rpx;
    width: 690rpx;
    height: 220rpx;
  }

  .commonPopup {
    /deep/ .u-popup__content {
      background: transparent;
      border-radius: 20rpx;
    }
  }

  .dkInfo {
    background: #fff;
    overflow: hidden;
    font-size: 30rpx;
    margin-top: 20rpx;
  }

  .leninfo {
    line-height: 50rpx;
    display: flex;
    margin: 10rpx 30rpx;
    padding: 10rpx 0rpx;

    &:not(:last-child) {
      border-bottom: 1px solid #e4e4e4;
    }

    .key {
      min-width: 220rpx;
      color: #909090;
      white-space: nowrap;
    }

    .value {
      text-align: right;
      flex-grow: 1;

      /deep/ .u-loading-icon {
        display: inline-block;
      }
    }
  }
  .buttomBtn {
  position: fixed;
  width: 100%;
  padding: 20rpx;
  box-sizing: border-box;
  bottom: 0;
}

.extInfo {
  background: #fff;
  margin-top: 20px;
  overflow: hidden;
  .text {
    margin: 20rpx 10rpx;
  }
  .extBtn {
    margin: 40rpx 40rpx;
    width: calc(100% - 80rpx);
  }
}
</style>